<template>
  <div class="container">
    <!-- 此子组件适用于及时上传文件，非及时上传需另做扩展 -->
    <form id="salaryExcelForm">
      <input
        type="file"
        id="salaryExcel"
        name="file"
        @change="fileChange"
        ref="uploadFileInput"
      />
    </form>
  </div>
</template>
<script>
import jqFrom from '../../kits/jquery.form'
import common from '../../kits/common'

export default {
  data() {
    return {}
  },
  //搜索条件
  props: {
    successCallBack: {
      type: Function,
      default: null,
    },
    errorCallBack: {
      type: Function,
      default: null,
    },
    uploadUrl: {
      type: String,
    },
    upLoadFile: {
      type: Array,
    },
  },

  methods: {
    clickUpload() {
      this.$refs.uploadFileInput.click()
    },
    uploadFileByAjaxSubmit(url, successCallBack, errorCallBack) {
      var that = this
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          //上传成功，传递参数到父组件，具体是展示图片还是姓名，在父组件做处理，子组件仅负责文件上传
          that.$emit('getData', data)
          successCallBack(data)
          $('#salaryExcel').val('')
        },
        error: function () {
          errorCallBack()
        },
      }

      $('#salaryExcelForm').ajaxSubmit(options)

      return false
    },
    fileChange() {
      var Filedata
      var file
      var fileSize
      Filedata = $('#salaryExcel').val()

      if (!Filedata) {
        return
      }

      try {
        file = $('#salaryExcel')[0].files[0]
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        var message = ''
        if (this.isCzUser()) {
          message =
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过50M，建议使用FireFox、Chrome或IE10以上浏览器。'
        } else {
          message =
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。'
        }
        this.$message({
          message: message,
          type: 'warning',
        })
      }

      // 文件大小和限制类型可以通过子组件传值区分，若不适应于使用页面，可自行判断
      if (this.upLoadFile.length == 5) {
        this.$message({
          message: '最多上传5个附件',
          type: 'warning',
        })
        $('#salaryExcel').val('')
        return
      }

      var messageText = ''
      var num = ''
      if (this.isCzUser()) {
        messageText = '最多能上传50M以内的文件'
        num = 1024 * 50
      } else {
        messageText = '最多能上传5M以内的文件'
        num = 1024 * 5
      }

      if (fileSize / 1 > num) {
        this.$message({
          message: messageText,
          type: 'warning',
        })
        $('#salaryExcel').val('')
        return
      }

      if (
        !/\.(doc|docx|xls|xlsx|txt|rar|zip|jpg|png|pdf|JPEG|PNG|PDF)$/.test(
          Filedata
        )
      ) {
        this.$message({
          message:
            '仅支持上传doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf格式文件',
          type: 'warning',
        })
        $('#salaryExcel').val('')
        return
      }

      //文件大小
      this.uploadFileByAjaxSubmit(
        this.uploadUrl,
        this.successCallBack,
        this.errorCallBack
      )
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .picContent {
    margin-top: 20px;
    .picBox {
      width: 120px;
      height: 120px;
      margin-right: 15px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
